<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" href="../../css/animate.css">
		<link rel="stylesheet" href="../../iconfont/iconfont.css">
		<link rel="stylesheet" href="../../css/mescroll.css">
		<link rel="stylesheet" href="../../css/gloab.css">
		<title>加粉中心</title>
		<style>
			.none-order {
				text-align: center;
				color: #727272;
				line-height: 200%;
				margin-top: 1rem;
			}

			.connect-modify {
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.7);
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 9999999999;
			}

			.connect-modify-center {
				width: 90%;
				border-radius: 0.14rem;
				box-sizing: border-box;
				padding: 0.24rem;
				margin: 2rem auto;
				background-color: #fff;
				text-align: center;
				position: relative;
			}

			.connect-modify-center-title {
				font-size: 0.3rem;
				margin-top: 0.24rem;
			}

			.connect-modify-center-text {
				font-size: 0.28rem;
				margin-top: 0.4rem;
			}

			.connect-modify-center img {
				width: 2.95rem;
				margin: 0.3rem auto;
			}

			.connect-modify-center-btn {
				width: 1.42rem;
				height: 0.48rem;
				line-height: 0.48rem;
				text-align: center;
				background-color: #f69246;
				border-radius: 0.08rem;
				color: #fff;
				font-size: 0.28rem;
				margin: 0.3rem auto;
			}

			.connect-modify-center-close {
				position: absolute;
				right: 0.24rem;
				top: 0;
			}

			.connect-modify-center-close img {
				width: 0.5rem;
			}

			.mescroll {
				position: fixed;
				top: 0;
				bottom: 0;
				height: auto;
				left: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="public-header">
				<div id="statusbar"></div>
				<header class="public-header">
					<!-- <div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div> -->
					<div class="public-header-title">加粉中心</div>
				</header>
			</div>
			<div class="jiafen-bar flex wrap" v-if="list&&list.length>0">
				<div class="jiafen-bar-son" style="height:1rem;" id="nav" v-for="(item,index) in list" @click="perwx(index,item.id)">
					<img :src="apiUrl1+item.icon" alt="">
					<p :style="num==index?'color:#18bc9c':''">{{item.title}}</p>
				</div>
			</div>
			<div class="connect-modify" style="display:none;">
				<div class="connect-modify-center">
					<div class="connect-modify-center-close"><img src="../../image/public/close.png" alt="" @click="close"></div>
					<img :src="apiUrl1+images" alt="">
					<div class="" style="height:0.45rem;width:100%;margin:auto 0;" @click="save(images)">
						<div style="margin:auto;color:#fff;border-radius:0.05rem;line-height:0.45rem;background:#4293f2;width:25%;height:0.45rem;">保存</div>
					</div>
					<div class="connect-modify-center-text">注：微信二维码请保存到相册再微信扫码</div>
				</div>
			</div>
			<div id="mescroll" class="mescroll">
				<div>
					<div class="product-category" style="margin-top:0.5rem;">
						<!-- <div id="mescroll" class="mescroll"> -->
						<div class="product-category-list">
							<div class="product-category-list-son" v-if="jiafendata&&jiafendata.length>0" v-for="(item,index) in jiafendata">
								<div class="product-category-list-header flex wrap">
									<div class="product-category-list-header-lf">
										<img :src="apiUrl1+item.user.avatar" alt="" v-if="item.user.avatar">
										<img src="../../image/public/touxiang.png" alt="" v-else>
										<label class="product-category-list-header-label">{{item.user.user_type}}</label>
									</div>
									<div class="product-category-list-header-rt">
										<div class="product-category-list-header-name flex">
											<div class="product-category-list-header-name-lf F7">{{item.user.nickname}}</div>
											<div class="product-category-list-header-name-rt F2"><span @click="look(item)">立即添加</span></div>
											<!-- <div class="connect-modify" v-if="erweima">
                            <div class="connect-modify-center">
                              <div class="connect-modify-center-close"><img src="../../image/public/close.png" alt="" @click="close"></div>
                              <img :src="apiUrl+item.images" alt="" >
                              <div class="connect-modify-center-text">注：微信二维码请保存到相册再微信扫码</div>
                            </div>
                          </div> -->
										</div>
										<div class="product-category-list-header-name flex">
											<div class="product-category-list-header-name-lb">
												<span class="zd-label" v-if="item.zhiding">置顶</span>
												<span class="zdsx-label" v-if="item.shuaxing">自动刷新</span>
											</div>
										</div>
									</div>
								</div>
								<div class="flex wrap">
									<div class="product-category-list-text" style="width:86%;height:0.8rem;overflow:hidden;" v-if="item.content"
									 v-html="item.content"></div>

									<div class="jiafen-quanwen" @click="javascript:api.openWin({name: 'jiafen_details',reload:true,url:'../jiafen/jiafen_details.html',pageParam: {id: item.id,uid:item.users_id,avatar:item.imgs[item.imgs.length - 1]}});">全文></div>
								</div>
								<div class="product-category-list-footer clearfix">
									<!-- <span class="wshy" style="color:#f00;border: 1px solid #f00;">排名:{{item.ranking}}</span> -->
									<span class="wshy" v-if="item.rank=='管理员'" style="color:#ff9c00;border: 1px solid #ff9c00;">系统广告</span>
									<span class="wshy">{{item.block}}</span>
									<span>曝光次数：{{item.view_count}}&nbsp;&nbsp;刷新：{{item.update_time_str}}</span>
									<div class="product-category-list-share fr" @click="share(item.id)">
										<img src="../../image/public/home9.png" alt="">
									</div>
								</div>
							</div>
							<div v-else class="none-order">
								<span>暂无数据</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="add-modify" style="display:none;">
				<div class="add-modify-center">
					<div class="add-modify-title">共赢团队</div>
					<div class="add-modify-text">微信二维码请保存到相册再微信扫码</div>
					<div class="add-modify-ewm"><img src="../../image/public/ewm.png" alt=""></div>
				</div>
				<div class="add-modify-btn">确认</div>
			</div>
		</div>
		<div class="public-progress" style="z-index:9;">
			<img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
		</div>
	</body>
	<script src="../../script/api.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/mescroll.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/fastclick.js"></script>
	<script src="../../script/jsencrypt.js"></script>
	<script>
		var vm;
		var mescroll;
		var mySwiper;
		apiready = function() {
			api.removeLaunchView();
			setBar("statusbar");
			setFont(750);
			startVue();
			NewMescroll();
			var top = $("#public-header").outerHeight(true) + 180;
			$("#mescroll").css({
				"top": top + "px"
			});
			$(".public-progress").fadeOut(1000);
			setTimeout(function() {
				$(".public-progress").css({
					"display": "none"
				});
			}, 1000);
		}

		function startVue() {
			vm = new Vue({
				el: "#app",
				data: {
					gdtt: ['', '', '', '', '', '', '', '', '', '', '', ''],
					jiafendata: [],
					list: [],
					page: 1,
					showpage: 10,
					images: '',
					num: 0,
					price: '',
					id: '6'
				},
				created: function() {
					// this.perwx();
					this.getJafenList();
				},
				mounted: function() {

				},
				methods: {
					//获取分享赠送积分
					getIntegral: function() {
						api.ajax({
							url: apiUrl + 'api/home/getIntegral',
							method: 'post',
							data: {
								values: {
									uid: post_en($api.getStorage('uid')),
								},
							}
						}, function(ret, err) {
							if (ret.status) {
								alert(ret.msg);
							} else {
								alert(ret.msg);
							}
						});
					},
					//分享朋友圈
					share: function(index) {
						// alert('开发中......');return;
						var wxPlus = api.require('wxPlus');
						wxPlus.isInstalled(function(ret, err) {
							if (ret.installed) {
								var wxPlus = api.require('wxPlus');
								wxPlus.shareWebpage({
									apiKey: '',
									scene: 'timeline',
									title: '最新项目',
									description: '本条信息由趣引流台推送，您也想自动引流，自动推广就下载吧。',
									thumb: 'widget://icon/logo.jpg',
									contentUrl: apiUrl + "/index.php/index/index/user/user.html?ids=" + index,
								}, function(ret, err) {
									if (ret.status) {
										vm.getIntegral();
									} else {
										alert(err.code);
									}
								});
							} else {
								alert('当前设备未安装微信客户端');
							}
						});
					},
					save: function(index) {
						var result = hasPermission('storage'); //权限检测
						var text = '"趣引流需要使用相册功能,请设置本地存储权限,点击确定前往设置本地存储权限,点击取消拒绝';
						requestPermission(text, 'storage', result, function(bool) {
							if (bool) {
								api.download({
									url: apiUrl1 + index,
									savePath: 'fs://Camera/' + new Date().getTime() + '.png',
									report: true,
									cache: true,
									allowResume: true
								}, function(ret, err) {
									if (ret.state == 1) {
										api.saveMediaToAlbum({
											path: ret.savePath,
											groupName: 'fs://',
										}, function(ret, err) {
											if (ret && ret.status) {
												alert('保存成功');
											} else {
												alert('保存失败');
											}
										});
									}
								});
							} else {
								msg("获取本地储存权限失败!无法打开相册");
							}
						})
					},
					zhiding: function(index) {
						api.ajax({
							url: apiUrl + 'api/home/getsticky',
							method: 'post',
							data: {
								values: {},
							}
						}, function(ret, err) {
							if (ret.status) {
								var prices = ret.data;
								if (prices == "") {
									msg('置顶费用不能为空');
									return;
								}
								api.openWin({
									name: 'pay',
									url: '../home/pay.html',
									pageParam: {
										// nickname:vm.nickname,
										release_price: prices,
										types: 6,
										ad: index,
									}
								});
							}
						})
					},
					more: function(obj) {
						if (obj.num) {
							vm.page++;
						} else {
							vm.page = 1;
							setTimeout(function() {
								mescroll.endSuccess();
								mescroll.lockUpScroll(false);
							}, 500);
						}
						vm.perwx(vm.num, vm.id);
					},
					//获取各个板块广告
					perwx: function(index, id) {
						console.log('id:' + id)
						if (id != vm.id) {
							vm.jiafendata = [];
							vm.page = 1;
							console.log("进来了")
						}
						vm.id = id;
						api.showProgress({
							title: '努力加载中...',
							text: '先喝杯茶...',
							modal: false
						});
						vm.num = index;
						var sectionid = '';
						// setTimeout(function(){
						if (vm.list[vm.num]) {
							var sectionid = JSON.stringify(vm.list[vm.num].id);
						} else {
							sectionid = 8;
						}
						api.ajax({
							url: apiUrl + '/api/index/task',
							method: 'post',
							data: {
								values: {
									type: id,
									page: vm.page
								},
							},
						}, function(ret, err) {
							if (vm.page == 1) {
								vm.jiafendata = [];
							}
							if (ret.code == 1) {
								if (vm.jiafendata.length >= ret.data.total && vm.jiafendata.length != 0) {
									api.hideProgress();
									msg("我也是有底线的！");
								} else {
									console.log('复制')
									api.hideProgress();
									for (var i = 0; i < ret.data.list.length; i++) {
										vm.jiafendata.push(ret.data.list[i]);
									}
								}
							}

							mescroll.endUpScroll(false);
							mescroll.endSuccess();
						});
						// },500);

					},
					//手动刷新
					manualRefresh: function(index) {
						if (vm.price == "") {
							api.toast({
								msg: '参数错误',
								duration: 2000,
								location: 'middle'
							});
							return;
						}
						api.openWin({
							name: 'pay',
							url: '../home/pay.html',
							pageParam: {
								release_price: vm.price,
								types: 7,
								ad_id: index,
							}
						});
					},
					getJafenList() {
						api.closeFrame({
							name: 'zhanzhang'
						});
						api.ajax({
							url: apiUrl + '/api/index/nav',
							method: 'post',
							data: {
								values: {
									type: 2
								},
							}
						}, function(ret, err) {
							console.log(JSON.stringify(ret))
							if (ret.code == 1) {
								vm.list = ret.data;
							} else {
								vm.list = ret.data;
							}
						});
					},
					look: function(res) {
						vm.images = res.imgs[res.imgs.length - 1];
						$(".connect-modify").show();
					},
					close: function() {
						$(".connect-modify").hide();
					},
				}
			})
		}

		function NewMescroll() {
			mescroll = new MeScroll("mescroll", {
				down: {
					use: true,
					auto: true,
					// autoShowLoading:true,
					callback: vm.more, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					use: true,
					auto: false,
					loadFull: { //自动加载下一页体验，前提是第一页的数据没有占满整个屏幕
						use: false,
						delay: 500
					},
					lazyLoad: {
						use: true, // 是否开启懒加载,默认false
						attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
						showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
						delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
						offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
					},
					callback: vm.more, //上拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				}
			})
		}
	</script>
</html>
